<template>
  <view class="notice-container">
    <view v-for="notice in noticeList" :key="notice.id" class="notice-item" @tap="goToNoticeDetail(notice)">
      <view class="notice-icon" :style="{ backgroundColor: '#4ecdc4' }">
        <uni-icons :type="'paperplane'" size="24" color="#fff" />
      </view>
      <view class="notice-content">
        <view class="notice-header">
          <view class="notice-title">{{ notice.title }}</view>
          <view class="notice-date">{{ notice.data }}</view>
        </view>
        <view class="notice-text">{{ notice.content }}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref, onMounted, onUnmounted } from 'vue'
  import { getNoticeListAPI } from '@/services/notice'
  import type { NoticeItem, NoticeType } from '@/types/notice'
  // import {onLoad, onHide} from '@dcloudio/uni-app'
  import { onShow, onHide, onReady, onLoad } from '@dcloudio/uni-app'
  const noticeList = ref<NoticeItem[]>([])
  let timer : NodeJS.Timeout | null = null

  // 获取通知列表
  const fetchNoticeList = async () => {
    const res = await getNoticeListAPI()
    // console.log(res)

    noticeList.value = res.data.info_list
    // console.log(noticeList.value)
  }

  const startTimer = () => {
    if (timer) {
      clearInterval(timer)
    }
    // 设置新的定时器，每10秒执行一次
    timer = setInterval(() => {
      fetchNoticeList()
    }, 10000)
  }

  // 跳转到通知详情
  const goToNoticeDetail = (notice : NoticeItem) => {
    uni.navigateTo({
      // url: `/pages/notice/detail?id=${notice.id}`,
      url: `/pagesOrder/detail/detail?id=${notice.orderid}`,
    })
  }

  onLoad(() => {
    fetchNoticeList()
    startTimer()
  })

  // onUnmounted(() => {
  //   // 组件卸载时清除定时器
  //   if (timer) {
  //     clearInterval(timer)
  //     timer = null
  //   }
  // })
  onUnmounted(() => {
    // 组件卸载时清除定时器
    if (timer) {
      clearInterval(timer)
      timer = null
    }
  })
  onHide(() => {
    // 组件卸载时清除定时器
    if (timer) {
      clearInterval(timer)
      timer = null
    }
  })
</script>

<style scoped>
  .notice-container {
    padding: 0 15px;
  }

  .notice-item {
    display: flex;
    align-items: flex-start;
    background-color: #fff;
    margin-bottom: 15px;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .notice-icon {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
  }

  .notice-content {
    flex: 1;
  }

  .notice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }

  .notice-title {
    font-weight: 600;
    font-size: 16px;
    color: #333;
  }

  .notice-date {
    color: #999;
    font-size: 12px;
  }

  .notice-text {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
  }
</style>
